<template>
  <div class="v-select-list">
    <div
      v-for="item in list"
      :id="'v'+item.id"
      :key="item.key"
      class="_row"
      :class="{_selected:item.selected,_disabled:item.disabled}"
      @click="handleSelect(item)"
    >
      <img :src="item.iconPath" :alt="item.iconPath" style="margin-right:4px;"/>
      <span class="_title">{{item.displayTitle || '---'}}</span>

    </div>
  </div>
</template>
<script>

export default {
  name: 'comp-select-list',
  components: {
  },
  props: {
    list: Array,

  },
  data() {
    return {
    };
  },
  mounted(){

  },
  methods: {

    handleSelect(item){
      if (item.disabled) return;
      //// this.toggle(item);
      this.$emit('select', item);

    },
    //// toggle(item){
    ////   console.log(item);
    ////   if (this.multiple){
    ////     const index  = this.selectedItems.indexOf(item);
    ////     if (index > -1){
    ////       this.selectedItems.splice(index, 1);
    ////       item.selected = false;
    ////     } else {
    ////       this.selectedItems.push(item);
    ////       item.selected = true;

    ////     }
    ////   } else {
    ////     if (this.selectedItems[0] !== item){
    ////       this.selectedItems[0] &&  (this.selectedItems[0].selected = false);
    ////       this.selectedItems = [item];
    ////       item.selected = true;

    ////     }

    ////   }

    //// }
  }
};
</script>
<style lang="scss" scoped>
.v-select-list {
	._row {
		cursor: pointer;
		&:hover {
			background-color: #e6f7ff;
		}
		&._selected {
				background-color:#bae7ff;
				&:hover {
					background-color: #bae7ff;
				}
		}
    &._disabled {
      background: white;
      color: rgba(0,0,0,0.25);
      cursor:not-allowed
    }

	}

}
</style>